<!DOCTYPE html>
<html lang="en">
<script src="./jquery-1.11.1.js"></script>

<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        body {
            font-family: "simsun";
        }

        .comment {
            font-size: 40px;
            color: #ff1100;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>

</head>

<body>


    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
    <!--  1.鼠标进入某个五角星，当前和之前的所有五角星变为实心，后面的是空心。

    2.鼠标点击某个五角星，记录该五角星
    
    3.鼠标移开后该记录点之前所有变为实心，之后的所有变为空心。 -->
    <script>
        $(function () {
            //鼠标进入移开使用mouseenter/mouseleave,鼠标进入某个五角星，当前和之前的所有五角星变为实心，后面的是空心。
            let x = `★`
            let y = `☆`
            $(`.comment`).on(`mouseenter`, `li`, function () {
                $(this).text(x).prevAll(`li`).text(x)
                $(this).nextAll(`li`).text(y)
            })
            //鼠标移开后,鼠标点击的某个五角星以及该五角星之前的所有变为实心，之后的所有变为空心。
            $(`.comment`).on(`mouseleave`, `li`, function () {
                //使用if判断,如果长度为0说明没有点选上，那么全是空心`☆`，否则点上及之前的全部是`★`
                if ($(this).length===0) {
                    $(`.comment`).text(y)
                } else {
                    $(this).text(x).prevAll(`li`).text(x)
                    $(this).nextAll(`li`).text(y)
                }
            })
        })
    </script>

</body>

</html>